<template>
	<view class="page-body" >
		<view class="qb-box"></view>
		<view class="menu_box">
			<view class="flex">
				<view class="flex_bd" @click="showPopup(1)">
					<view class="grid_price ff"><text class="fs40">￥</text>{{walletData.user_money}}</view>
					<view class="grid_text">钱包余额</view>
				</view>
				<view class="flex_bd">
					<view class="grid_price ff">{{ parseInt(walletData.user_integral) }}</view>
					<view class="grid_text">积分</view>
				</view>
				<!-- <view class="flex_bd" @click="showPopup(2)">
					<view class="grid_price ff">
						{{ ((Math.round(account.role_value * 100) / 100) + parseInt(account.level_value)).toFixed(2) }}
					</view>
					<view class="grid_text">芒果</view>
				</view> -->
				
			</view>


			<view class="grid_menu">
				<u-grid :col="3" :border="false" style="justify-content: space-around;">
					<view style="height: 30rpx;"></view>
					<!-- <u-grid-item>
						<view class="money ff">{{withdrawing}}</view>
						<view class="titel">提现中</view>
					</u-grid-item> -->
					<!-- <u-grid-item>
						<view class="money ff">{{account.withdraw_money_total}}</view>
						<view class="titel">累计提现</view>
					</u-grid-item> -->
					<!-- <u-grid-item>
						<view class="money ff">{{account.role_cost_value}}</view>
						<view class="titel">芒豆</view>
					</u-grid-item> -->
				</u-grid>
			</view>
		</view>

		<view class="gridbox flex">
			<view class="card-item flex_bd" @click="goPage('/bundle/pages/withdraw_record/withdraw_record')">
				<view class="img44">
					<image src="/static/images/icon_01.png" mode=""></image>
				</view>
				<view class="fs28 mt20">提现记录</view>
			</view>
			<view class="card-item flex_bd" @click="goPage('/bundle/pages/user_bill/user_bill?type=user_money')">
				<view class="img44">
					<image src="/static/images/icon_02.png" mode=""></image>
				</view>
				<view class="fs28 mt20">余额明细</view>
			</view>
			<!-- <view class="card-item flex_bd" @click="goPage('valueLog')">
				<view class="img44">
					<image src="../../../static/images/icon_02.png" mode=""></image>
				</view>
				<view class="fs28 mt20">芒果明细</view>
			</view> -->
		</view>
		<view class="gridbox flex">
			<!-- <view class="card-item flex_bd" @click="goPage('rechargeLog')">
				<view class="img44">
					<image src="../../../static/images/icon_02.png" mode=""></image>
				</view>
				<view class="fs28 mt20">充值明细</view>
			</view> -->
			<!-- <view class="card-item flex_bd" @click="goPage('dividendlog')">
				<view class="img44">
					<image src="../../../static/images/icon_02.png" mode=""></image>
				</view>
				<view class="fs28 mt20">补贴明细</view>
			</view> -->
			<view class="card-item flex_bd" @click="goPage('/bundle/pages/transfer_record/transfer_record')">
				<view class="img44">
					<image src="/static/images/icon_02.png" mode=""></image>
				</view>
				<view class="fs28 mt20">转账明细</view>
			</view>
			<view class="card-item flex_bd" @click="goPage('/bundle/pages/user_bill/user_bill?type=user_integral')">
				<view class="img44">
					<image src="/static/images/icon_02.png" mode=""></image>
				</view>
				<view class="fs28 mt20">积分明细</view>
			</view>
		</view>
        <!-- 
         余额与芒果积分的弹窗放在一块了。
         
         -->
		<u-popup mode="bottom" ref="select">
			<view class="p30" v-if="type == 1">
				<button  size="default" shape="circle" type="primary" class="mt20 primarybtnB fs32"
					@click="goPage('bundle/pages/convertibility/withdrawalBalance' )">去提现</button>
				<button  size="default" shape="circle" type="primary" class="mt20 primarybtnB fs32"
					@click="goPage('bundle/pages/balance_transfer/balance_transfer')">余额转赠</button>
				
			</view>
            
            <!-- <view class="p30"  v-if="type ==2">
            	<button v-if="type == 2" size="default" shape="circle" type="primary" class="mt20 primarybtnB fs32"
            		@click="goPage('bundle/pages/user_wallet/userTeam/value_to_integral')">芒果兑积分</button>
            	<button v-if="type == 2" size="default" shape="circle" type="primary" class="mt20 primarybtnB fs32"
            		@click="goPage('gxz_to_money')">芒果转余额</button>
            	
            </view> -->
			<view style="height: 50rpx;"></view>
		</u-popup>
	</view>
</template>

<script>
	import { apiWalletData } from '@/api/user';
	import request from '@/utils/request.js';
	export default {
		data() {
			let that = this;
			return {
				setting: {},
				account: {},
				withdrawing: 0,
				type: 0,
				walletData: {
				    user_money: '0.00', //总资产
				    total_recharge_amount: '0.00', //累计充值
				    total_order_amount: '0.00' ,//累计消费
					user_integral:0.00
				}
			}
		},
		onLoad() {

		},
		onShow() {
			apiWalletData().then(res => {
				console.log(res)
			    this.walletData = res;
			})
			
		},
		onReady() {},
		methods: {
			showPopup(type) {
				this.type = type;
				this.$refs.select.open();
			},
			goPage(type){
				uni.navigateTo({
					url:type
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.primarybtnB {
		color: #FFFFFF;
		background-color: #ff8200 ;
	}
	.fs32 {
	    font-size: 32rpx !important;
	}
	.p30{
		padding: 30rpx !important;
	}
	.mt20{margin-top: 40rpx;}
	.fs28 {
	    font-size: 28rpx !important;
	}
	.ff {
	  font-family: number;
	}
	.flex_bd{
		flex: 1;
	}
	.flex {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
	}
	.page-body{
		height: 100%;
	}
	.menu_box {
		border-radius: 10rpx;
		background-color: #FFFFFF;
		padding: 40rpx 0rpx;
		text-align: center;

		.grid_price {
			color: #ff8200;
			font-size: 60rpx;
			font-weight: 500;

			text {
				font-size: 40rpx;
			}
		}

		.grid_text {
			font-size: 28rpx;
			color: #ff8200;
		}
	}

	.qb-box {

		padding: 150rpx 0;
		// background: linear-gradient(90deg,
		// rgba(247, 197, 0, 1.0) 0%, 
		// rgba(247, 197, 0, 1.0) 100%), 
		// linear-gradient(
		// rgba(247, 197, 0, 1.0), 
		// rgba(247, 197, 0, 1.0));	
		background-color: #ff8200;
	}

	.img44 {
		image {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.gridbox {
		margin: 20rpx 15rpx;

		.card-item {
			margin: 0rpx 10rpx;
			background-color: #ffffff;
			box-shadow: 0px 10rpx 15rpx 0px rgba(188, 188, 188, 0.1);
			border-radius: 20rpx;
			text-align: center;
			padding: 60rpx 0;
		}
	}

	.menu_box {
		background-color: #ffffff;
		box-shadow: 0px 10rpx 15rpx 0px rgba(188, 188, 188, 0.1);
		border-radius: 20rpx;
		margin: 20rpx;
		margin-top: -200rpx;
		padding: 60rpx 0 30rpx 0;
	}

	.grid_menu {
		
		.u-grid-item {
			line-height: 55rpx;

			.img {
				margin: 0rpx auto;
				margin-bottom: 30rpx;
				background-color: #f9f9f9 !important;
				padding: 30rpx;
			}

			.titel {
				color: #ff8200;
				font-size: 28rpx;
			}

			.money {
				height: 55rpx;
				margin-top: 30rpx;
				font-weight: 600;
				font-size: 40rpx;

				&::before {
					content: '￥';
					font-size: 24rpx;
				}
			}
		}
	}
</style>